<template>
  <div class='container'>
    <!-- 卡片 -->
    <el-card>
      <el-row  type="flex" justify="space-between" align="middle">
        <el-col :span="18">
                学科名称
                <!-- @keyup.enter.native="enter" ele需要加native -->
                <el-input class="inp" style="width:200px" v-model="inp" placeholder="请输入内容" @keyup.enter.native="search"></el-input>
                <el-button @click="reset">清除</el-button>
                <el-button type="primary" @click="search">搜索</el-button>
        </el-col>
        <el-col :span="2">
             <el-button type="success" class="el-icon-edit" @click="update">新增学科</el-button>
        </el-col>
      </el-row>
       <!-- 提示框 -->
       <el-alert :title="cTitle" type="info" :closable="false" class="el-icon-info"></el-alert>
      <!-- 表格 -->
      <el-table
    ref="filterTable"
    :data="list"
    style="width: 100%"
    >
    <el-table-column prop="date" label="序号" width="50" type=index fixed >
    </el-table-column>
    <el-table-column prop="subjectName" label="学科名称" width="150">
    </el-table-column>
    <el-table-column prop="username" label="创建者" width="150">
    </el-table-column>
    <el-table-column prop="addDate" label="创建日期" width="150">
      <template v-slot="{row}">
        {{row.addDate | parseTimeByString}}
      </template>
    </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示" width="130">
        <template v-slot="{row}">
            {{ row.isFrontDisplay | state }}
        </template>
       </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录" width="150">
       </el-table-column>
       <el-table-column prop="tags" label="标签" width="140">
    </el-table-column>
    <el-table-column prop="totals" label="题目数量" width="140">
    </el-table-column>
    <el-table-column prop="address" label="操作" fixed="right" width="230">
      <template v-slot="{row}">
        <el-link :underline="false" type="primary" @click="directorys(row)">学科分类</el-link>
        <el-link :underline="false" type="primary" @click="tags(row)" >学科标签</el-link>
        <el-link :underline="false" type="primary" @click="update(row)">修改</el-link>
        <el-link :underline="false" type="primary" @click="remove(row)">删除</el-link>
      </template>
    </el-table-column>

  </el-table>
<el-row type="flex" justify="end">
  <el-col :span="7">
        <el-pagination background layout="prev, pager, next,sizes, jumper" :total="page.counts" :current-page="page.page" :page-sizes="[10, 20, 30, 40]" :page-size="10" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </el-pagination>
  </el-col>
</el-row>
    </el-card>
    <SubjectsAdd :title="title" :subjectsUpdate="subjectsUpdate" :showDialog.sync="showDialog" :page="page" @clear="clear"></SubjectsAdd>f
  </div>
</template>

<script>
import { list, detail, remove } from '@/api/hmmm/subjects.js'

// 导入组价
import SubjectsAdd from '@/module-hmmm/components/subjects-add.vue'
import { parseTimeByString } from '@/filters'
export default {
  components: {
    SubjectsAdd
  },
  data () {
    return {
      page: { // 控制页码
        counts: 11,
        pagesize: 10,
        pages: 2,
        page: 1
      },
      list: [], // 列表数据
      inp: '', // 筛选
      subjectsUpdate: { // 修改的数据
        isFrontDisplay: 1
      },
      showDialog: false, // 控制显示隐藏
      state: '' // 标签状态
    }
  },
  created () {
    this.subjectsList()
  },
  methods: {

    async subjectsList () { // 获取列表
      const { data } = await list(this.page)
      this.page.counts = data.counts
      this.list = data.items // 赋值
      this.page.page = Number(data.page) // 强转为数据类型
    },
    handleSizeChange (val) { // 设置每页条数
      this.page.pagesize = val
      this.inp ? this.subjectsList() : this.search()
    },
    handleCurrentChange (val) { // 跳转页数
      this.page.page = val
      // this.subjectsList()
      this.inp ? this.subjectsList() : this.search()
    },
    async update (val) { // 修改和新增
      if (val.id) { // 判断有没有id=>有id就是修改没有就是新增
        const res = await detail(val)
        this.subjectsUpdate = res.data
        this.showDialog = true // 打开弹层
      } else {
        this.showDialog = true
      }
      this.subjectsList()
    },
    async remove (val) { // 删除
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示')
        await remove(val)
        this.$message({ // 删除成功后提示
          type: 'success',
          message: '删除成功!'
        })
        if (this.list.length === 1 && this.page.page > 1) this.page.page-- // 删光跳转
        this.subjectsList() // 刷新数据
      } catch (err) {
        console.log(err)
      }
    },
    clear () { // 弹框取消
      this.subjectsUpdate.isFrontDisplay = 1 // 启用禁用是否显示
      this.subjectsUpdate.subjectName = ''
      this.subjectsList()
    },
    async search () { // 搜索
      if (this.inp) { // 筛选
        var { data } = await list({ ...this.page, subjectName: this.inp })
        this.page.counts = data.counts
        this.list = data.items // 赋值
        this.page.page = Number(data.page) // 强转为数据类型
      } else {
        this.subjectsList()
      }
      //
    },
    reset () { // 清除
      this.subjectsList()
      this.inp = ''
    },
    directorys (row) { // 跳转到目录
      this.$router.push({ path: `directorys?id=${row.id}&name=${row.subjectName}` }) // 页面跳转
    },
    tags (row) { // 跳转到标签
      this.$router.push({ path: `tags?id=${row.id}&name=${row.subjectName}` })// 页面跳转
    }
  },
  computed: { // 弹窗标题
    title () {
      return this.subjectsUpdate.id ? '修改学科' : '新增学科'
    },
    cTitle () {
      return `数据一共${this.page.counts}条`
    }
  },
  filters: { // 筛选
    parseTimeByString,
    state (val) { // 前台显示是否
      return val === 1 ? '是' : '否'
    }
  }
}
</script>

<style scoped>
.el-card{
  margin-bottom: 20px;
}
.el-alert{
   margin: 15px 0;
}

.inp{
  margin: 0 10px;
}
.el-link{
  margin-right: 5px;
}
</style>
